<template>
  <div id="views">
    <section class="sec1">
      <span class="name">{{name}}</span>
      <div>
        <p class="can_use"><span>可用：</span>{{can_use}}</p>
        <p class="about_money">≈￥{{about_money}}</p>
      </div>
    </section>
    <section class="sec2">
      <p class="title">请选择提币方式</p>
      <input type="radio" hidden id="bhpay" name="pay_type" value="0" v-model="return_type" checked>
      <label for="bhpay" class="hoverhand">
        <span class="toMyBhpay">转入我的BHPay钱包(无手续费)</span>
      </label>
      <input type="radio" hidden id='else' name="pay_type" v-model="return_type" value="1">
      <label for="else" class="hoverhand">
        <span>转入其他数字钱包</span>
      </label>
    </section>
    <section v-show="return_type == 1 || (return_type == 0 && openBhpay == 1)" class="sec4" id="inputArea">
      <div class="cardMes" v-show="return_type == 0">
        <div>
          <p class="name">{{card_name}}</p>
          <p class="p2">
            <span class="bhpaycard">BHPay (尾号{{card_num}})</span>
            <a :href="down_uri" class="downloadBhpay">下载BHPay钱包</a>
          </p>
        </div>
      </div>
      <div class="outAddress" v-if="return_type == 1">
        <input type="text" placeholder="请输入您的收币地址" v-model="other_out_address">
<!--        <router-link :to="{path:'/my_banks_coinsaddress' , query :{sled:1}}">-->
<!--          <img src="../../common/imgs/outaddress.png" alt="地址">-->
<!--        </router-link>-->
      </div>
      <p class="inputNum">
        <input type="number" placeholder="请输入数量"  v-model="num" @input="numchange($event,'input')">
      </p>
      <div class="rangediv">
        <span class="left">0</span>
        <input ref="range" :step="inputStep" type="range" value="0" @input="numchange($event , 'range')" :max="can_use">
        <span class="bg"></span>
        <span class="right">100%</span>
      </div>
      <div class="pwsdiv">
        <input type="password" v-model="pws" placeholder="请输入6位数字交易密码">
      </div>
      <div class="codediv">
        <input type="number" v-model="code" placeholder="请输入验证码">
<!--        <tongdun-Countdown wt='2.6rem' :verfityMobile="false" hg='0.89rem' ref="tdEle"
beginMsg="获取验证码" refreshMsg="重新获取" timeout="1000"-->
<!--          endtime="60" @run="getCode" @getTdToken="getTdToken"></tongdun-Countdown>-->
        <tongdun-Countdown verfityMobile='false' wt='' hg='' ref="tdEle" beginMsg="获取验证码"
                           refreshMsg="重新获取" timeout="1000" endtime="60" @run="getCode" @getTdToken="getTdToken"></tongdun-Countdown>
      </div>
      <p class="findpws">
        <a href="javascript: void  0;" @click="showDialog">忘记交易密码 申请找回</a>
      </p>
      <p class="cost"> 手续费：{{return_type == 0 ? '0.00' : withdrawCoinFee}} </p>
      <button class="sub yellowbtn" @click="sub">发起提币</button>
    </section>
    <section class="notbhpay" v-show="openBhpay == 0 && return_type == 0">
      <img src="../../common/imgs/notbhpay.png" alt="无">
      <p>
        当前账号未关联,无法提币到BHPay账户 <br><br>
        请下载APP进行关联
        <!--        <span class="toapp" v-if="isPc == 2">请到app上关联BHPay账户</span>-->
      </p>
      <a :href="downAPPUrl" class="yellowbtn">下载人人矿场APP</a>
    </section>
    <div class="reminder" v-show="return_type == 1 || (return_type == 0 && openBhpay == 1 ) ">
      <h2 class="title">提示</h2>
      <div>
        1:最小提币数量为<span class="red">{{min}}{{coin}}</span><br>
        2.提币到BHPay钱包不收取手续费 <br>
        3.请务必保证提币账号的准确性，否则资产将无法找回 <br>
        <span class="showchange"> 4.通过审核后0-60分钟到账，网络原因可能有延迟</span><br>
        5.如长时间未到账，请联系客服核查
      </div>
    </div>
    <dia-log ref="dl" v-bind:msg="errInfo"></dia-log>
    <dange-dialog @confirm="confirmSub" ref='dgLog' v-bind:msg="dangeInfo"></dange-dialog>
    <dia-log ref="dl2" v-bind:msg="msg"></dia-log>
  </div>
</template>

<script>
  import {getMbCode2, bhpayMes, outCoinsTobhpay, myAssets, outCoinsToOther, minOutNum} from '../../http/api';

  export default {
    name: 'out_coins',
    data() {
      return {
        introduce: '提币',
        downAPPUrl : null,
        msg: '找回交易密码请打开APP操作',
        isPc: this.browserType(),
        mobile: this.$store.state.mobile,
        coin: this.$route.query.coin.toUpperCase(),//币种
        name: this.$route.query.name,//名称
        can_use: '',//可用
        about_money: '',//总估计金额
        num: 0,//输入数量
        pws: '',//密码
        return_type: 0,//提币方式
        code: '',//验证码
        openBhpay: 2,//是否开通bhpay账户  0 未开通 1 已开通  2页面初始值
        card_num: '',//收币地址
        down_uri: '',//bhpay下载地址
        card_name: '',//bhpay卡主
        other_out_address: '',//其他收币地址
        yzm_token: null,//同盾token
        errInfo: '您输入的地址与链不匹配，请确认后重新选择【链名称】',
        dangeInfo: '您的提币操作一旦完成，对应的资产所有权将由您变更为目标地址所对应的账户所有人享有，请您务必在提币操作前，仔细核对提币地址信息，确保提币属于自愿行为，并确认不涉及任何传销、非法集资、诈骗等违法情形，避免造成不要的财产损失',
        minOutBhapyData : {},
        minOutOtherData : {},
        withdrawCoinFee : null,//手续费
        max : null,//最大提币数量
        min: '0.00000001',//最小数量
        inputStep : '', //input range step
        sliceNumber : 8,//slice number
      }
    },
    components: {
      tongdunCountdown: resolve => {
        require(['../../components/tongdunCountdown'], resolve)
      },//同盾倒计时功能插件
      dangeDialog: resolve => {
        require(['../../components/dangeDialog'], resolve)
      },
      DiaLog: resolve => {
        require(['../../components/dialog'], resolve)
      },
    },
    mounted() {
      this.downAPPUrl = this.$store.state.downloadUrl;
      this.loadPage();
    },
    watch:{
      num (num){
        if(num > 0 ){
          let thiz = this;
          let new_num = this.scientificToNumber(num);
          this.num = this.numSlice(new_num , thiz.sliceNumber);
        }
      },
      pws(){
        this.pws = this.pws.replace(/[^\d]/g,'').slice(0,6);
      },
      code(){
        this.code = this.code.replace(/[^\d]/g,'').slice(0,6);
      },
      'return_type'(type){
        this.min = type == 0 ? this.minOutBhapyData : this.minOutOtherData.repurchaseMin
      }
    },
    methods: {
      loadPage() {
        let thiz = this;
        let noLoading = {noLoading: true};
        this.loading();
        let https = [
          bhpayMes({noLoading :true , noToast : true}).then(res => {
            if (res.code == 200) {
              let data = res.data || false;
              if (data && JSON.stringify(data) != '{}') {
                //已绑定bhpay
                this.openBhpay = 1;
                this.card_name = data.name;
                this.card_num = data.card_num.slice(-4);
                this.down_uri = data.down_uri;
              } else {
                this.openBhpay = 0;//无账户
              }
            }else{
              this.openBhpay = 0;//无账户
            }
          }),
          myAssets(noLoading).then(res => {
            if (res.code == 200) {
              let coin = thiz.coin.toLowerCase();
              let data = res.data.res;
              let my_finance = data.my_finance;
              let sliceNumber = this.coin === 'BTC' || this.coin === 'ETH' ||this.coin === 'LTC' ? 8 : 4;
              thiz.sliceNumber = sliceNumber;
              let begin = '';
              for(let i = 0 ; i < sliceNumber-1 ; i++){
                begin += '0';
              }
              this.inputStep = '0.'+ begin + '1';
              this.for(my_finance, (item, index) => {
                if (item.coin_name == coin) {
                  thiz.can_use = ''+thiz.numSlice(item.coin , sliceNumber);//获取可用余额币
                  // thiz.can_use = '0.00000003'
                }
              });
              let price_key = `buy_${coin}_price`;
              let price = data.coinPrice[price_key];//当前币种价格
              thiz.about_money = thiz.numSlice(thiz.accMul(thiz.can_use, price), 2);
            }
          }),
          minOutNum({noLoading : true , coin_code : thiz.coin }).then(res => {
            if (res.code == 200) {
              this.minOutBhapyData = res.data.bhpay;
              this.min = this.minOutBhapyData;
              this.minOutOtherData = res.data.other;
              this.max = this.minOutOtherData.tradeSecondMax;
              this.withdrawCoinFee = this.minOutOtherData.withdrawCoinFee;
            }
          })
        ];
        Promise.all(https).then(res => {
          this.closeLoading();
        });
      },
      showDialog() {
        this.$refs.dl2.dialogShow();
      },
      getTdToken() {
        let thiz = this;
        thiz.$refs.tdEle.getTdToken(function (res) {
          thiz.yzm_token = res.yzm_token;
          thiz.blackBox = res.blackBox;
          thiz.getCode();
        })
      },
      getCode() {
        let thiz = this;
        getMbCode2({yzm_token: thiz.yzm_token, blackBox: thiz.blackBox, token: ''}).then(res => {
          if (res.code == 200) {
            require('../../common/js/toast').toast('验证码已发送至您的手机');
            thiz.$refs.tdEle.begin();
          }
        })
      },
      confirmSub() {
        let thiz = this;
        let params = {
          currency_name: thiz.coin,
          num: thiz.num,
          trade_password: thiz.pws,
          smscaptcha: thiz.code
        };
        if (this.return_type == 0) {
          //提币到bhpay
          outCoinsTobhpay(params).then(res => {
            if (res.code == 200) {
              require('../../common/js/toast').toast('提币成功');
              thiz.timeout(function () {
                thiz.$router.go(-1);
              }, 1000)
            }
          })
        }
        else {
          //提币到其他地址
          let param2 = {
            wallet_address: thiz.other_out_address,
            coin_type: thiz.coin,
            coin_num: thiz.num,
            smscaptcha: thiz.code,
            trade_password: thiz.pws,
          };
          outCoinsToOther(param2).then(res => {
            if (res.code == 200) {
              require('../../common/js/toast').toast(`提币成功`);
              thiz.timeout(function () {
                thiz.$router.go(-1);
              }, 1000)
            }
          });
        }
      },
      sub() {
        //提交
        let toast = require('../../common/js/toast').toast, thiz = this;
        if (Number(this.can_use) < Number(this.min)) {
          toast('可提币数量不足');
          return;
        }
        if (Number(this.num) < Number(this.min)) {
          toast('最低提币数量' + this.min);
          return;
        }
        if (Number(this.num) > Number(this.max)) {
          toast('最大提币数量' + this.max);
          return;
        }
        if (Number(this.num) > Number(this.can_use)) {
          this.num = this.can_use;
        }
        if (!this.pws) {
          toast('请输入交易密码');
          return;
        }
        if (!this.code) {
          toast('请输入验证码');
          return;
        }
        if (!this.yzm_token) {
          toast('请完成智能验证');
          return;
        }
        if (this.return_type == 1 && !this.other_out_address) {
          toast('请输入提币地址');
          return;
        }
        if (this.return_type == 1){
          thiz.$refs.dgLog.dialogShow();
        }else{
          thiz.confirmSub();
        }
      },
      numchange(e, type) {
        if (type == 'input') {
          if (Number(this.num) > Number(this.can_use)) {
            this.num = this.can_use;
          }
        } else {
          let $input = e.currentTarget;
          let val = $input.value;
          this.num = val || null;
        }
        let bg = `background-size:${Number(this.num || 0) / this.can_use * 100}% 100%`;
        this.$refs.range.value = this.num || 0;
        this.$refs.range.style = bg;
      }
    }
  }
</script>

<style type="text/less" lang="less" scoped>
  #views{
    background: #fff;padding:0.36rem 0.3rem;padding-bottom: 0.45rem;
    .sec1{
      background: url('../../common/imgs/out_name_bg.png');background-size: 100% 100%;height:1.52rem;color: #181818;overflow: hidden;
      .name{
        font-size: 0.42rem;line-height: 1.52rem;padding-left: 0.3rem;
      }
      >div{
        float: right;height: 100%;text-align: right;padding-right: 0.3rem;
        .can_use{
          font-size: 0.32rem;padding-top: 0.46rem;vertical-align: middle;
          span{
            font-size: 0.28rem;vertical-align: middle;float: left;
          }
        }
        .about_money{
          font-size: 0.24rem;color:rgba(0,0,0,0.3);padding-top: 0.16rem;
        }
      }
    }
    .sec2{
      background: #F8F8F8;border-radius: 0.04rem;margin-top: 0.23rem;padding:0.3rem;padding-top: 0.25rem;padding-bottom: 0;
      >.title{
        font-size: 0.28rem;padding-bottom: 0.2rem;
      }
      >label{
        border-bottom: 0.01rem solid#E2E2E2;display: inline-block;width: 100%;color: #A1A1A1;font-size: 0.28rem;position: relative;padding:0.33rem 0;padding-left: 0.45rem;
      }
      >label:before{
          content: '';display: inline-block;width: 0.27rem;height:0.27rem;position: absolute;left: 0;top:50%;margin-top: -0.135rem;background: url('../../common/imgs/radioborder.png');background-size: 100% 100%;
      }
      >label:last-child{
        border: 0;
      }
      input[name=pay_type]:checked + label:before{
        content: '';display: inline-block;width: 0.27rem;height:0.27rem;position: absolute;left: 0;top:50%;margin-top: -0.135rem;background: url('../../common/imgs/yellowchecked.png');background-size: 100% 100%;
      }
      .toMyBhpay{
        position: relative;
      }
      .toMyBhpay:after{
         content:'';display: inline-block;width: 0.67rem;height: 0.36rem;background: url('../../common/imgs/recommend.png');background-size: 100% 100%;position: absolute;right:-0.7rem;top:-0.25rem;
       }
    }

    .sec4{
      .cardMes{
        height:1.7rem;padding-top: 0.2rem;
        >div{
          background: url('../../common/imgs/outcoins_bankbg.png') center center no-repeat;background-size: 100% 100%;height: 1.28rem;padding:0 0.3rem;
          box-shadow: 0px 6px 10px #edcd9142;-moz-box-shadow: 0px 6px 10px #edcd9142;-web-kit-shadow: 0px 6px 10px #edcd9142;color: #4B3E31;
          .name{
            font-size: 0.24rem;padding-top: 0.3rem;
          }
          .p2{
            font-size: 0.28rem;padding-top: 0.2rem;
          }
          .downloadBhpay{
            float: right;color: rgba(75,62,49,0.68);font-size: 0.24rem;position: relative;padding-right: 0.3rem;
          }
          .downloadBhpay:after{
            content:'';background: url('../../common/imgs/doublejt.png') center center no-repeat;background-size:100% 100%;height:0.15rem;width: 0.21rem;position: absolute;right:0;top:50%;margin-top: -0.075rem;
          }
        }
      }
      .inputNum{
        border-bottom: 0.01rem solid#E9E9E9;padding-bottom: 0.01rem;
      }
      input{
        height:0.88rem;width: 100%;font-size: 0.28rem;
      }
      input::-webkit-input-placeholder{color:#AFB2B8;font-size: 0.28rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
      input::-moz-placeholder {color:#AFB2B8;font-size: 0.28rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
      input:-ms-input-placeholder{color:#AFB2B8;font-size: 0.28rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
      input{color: #262626;font-size: 0.28rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
      .rangediv{
        position: relative;overflow: hidden;height:auto;padding:0.3rem 0;
        span{
          color: #ADADAD;font-size: 0.24rem;line-height: 0.5rem;width: 0.6rem;text-align: center;display: inline-block;
        }
        .left{
          width:0.3rem;
        }
        .right{
          float: right;
        }
        .bg{
          line-height: 100%;width:calc( 100% - 1rem );left:0.3rem;display: inline-block;position: absolute;height: 0.04rem;background: #EBEBEB;top:50%;margin-top: -0.02rem;
        }

      }
      .pwsdiv{
        padding-bottom: 0.01rem;border-bottom: 0.01rem solid #E9E9E9;
        input{
          width:100%;height: 0.88rem;
        }
      }
      .outAddress{
        padding-bottom: 0.01rem;border-bottom: 0.01rem solid #E9E9E9;position: relative;
        input{
          width:calc( 100% - 0.45rem );height: 0.88rem;
        }
        a{
          display: inline-block;float: right;padding-left: 0.15rem;padding-top: 0.32rem;
          img{width: 0.3rem;height: 0.25rem;}
        }
      }
      .findpws{
        text-align: right;padding: 0.2rem 0;
        a{
          color: #FFB303;font-size: 0.22rem;
        }
      }
      .codediv{
         padding-bottom: 0.01rem;border-bottom: 0.01rem solid #E9E9E9;position: relative;
         /deep/ #cd_box{
               right: 0!important;position: absolute;left: auto; float: right;width: 2.6rem;overflow: hidden;
         }
        /deep/ .countDown{
               width: 1.6rem;float: right;  height: 0.6rem;  font-size: 0.24rem; border-radius: 0.04rem;line-height: 0.6rem; margin-top: 0.16rem;background: #F8D448;
         }
         input{
           width:calc( 100% - 2.6rem );
         }
      }
      .cost{
        font-size: 0.28rem;padding-bottom: 0.24rem;
      }
      .sub{
        height: 0.88rem;border-radius: 1rem;font-size: 0.28rem;margin-top: 0.24rem;
      }
      input[type=range] {
        width: calc( 100% - 1rem );
        -webkit-appearance: none;
        display: inline-block;
        border-radius: 0.1rem;
        background: none;
        border: none;
        height: 0.04rem;
        float: none;
        vertical-align: middle;
        background: -webkit-linear-gradient(#fabf38, #fabf38) no-repeat;
        background: -moz-linear-gradient(#fabf38, #fabf38) no-repeat;
        background: linear-gradient(#fabf38, #fabf38) no-repeat;
        background-size: 0% 100%;
        position: absolute;
        z-index: 1;
        top:50%;
        margin-top: -0.02rem;
      }
      input[type=range]::-moz-range-progress {
        background: linear-gradient(#fabf38, #fabf38) no-repeat;
        height: 5px;
      }
      input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
      }
      input[type=range]::-webkit-slider-runnable-track {
        height: 0;
        background: none;
        border:0;
      }
      input[type=range]:focus {
        outline: none;
        cursor: pointer;
      }
      input[type=range]:hover{cursor: pointer}
      input[type=range]::-webkit-slider-thumb {/*圆形滑块*/
        -webkit-appearance: none;
        box-shadow: border-box;
        height: 0.5rem;
        width: 0.5rem;
        margin-top: -0.25rem; /*使滑块超出轨道部分的偏移量相等*/
        background: #ffffff;
        border-radius: 50%; /*外观设置为圆形*/
        border: none; /*设置边框*/
        -webkit-box-shadow:0px 0.04rem 0.04rem rgba(0,0,0,0.5);
        box-shadow: 0px 0.04rem 0.04rem rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0.04rem 0.04rem rgba(0,0,0,0.5);
        -web-kit-shadow: 0px 0.04rem 0.04rem rgba(0,0,0,0.5);
      }
      input[type=range] {
        -webkit-appearance: none;
        width: calc( 100% - 1rem );
        border-radius: 4px;
      }

      input[type=range]::-ms-track {
        height: 0.5rem;
        border-radius: 0.1rem;
        box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
        border-color: transparent; /*去除原有边框*/
        color: transparent; /*去除轨道内的竖线*/
      }

      input[type=range]::-ms-thumb {
        height: 0.19rem;
        width:  0.19rem;
        margin-top: -10px; /*使滑块超出轨道部分的偏移量相等*/
        background: #ffffff;
        border-radius: 50%; /*外观设置为圆形*/
        border: solid 0.125em #fabf38; /*设置边框*/
        box-shadow: 0 .0em .0em #3b4547; /*添加底部阴影*/
      }

      input[type=range]::-ms-fill-lower {
        /*进度条已填充的部分*/
        height: 5px;
        border-radius: 4px;
        background: linear-gradient(#fabf38, #fabf38) no-repeat;
      }

      input[type=range]::-ms-fill-upper {
        /*进度条未填充的部分*/
        height: 0.05rem;
        border-radius: 0.04rem;
        background: #e8e7e7;
      }

      input[type=range]:focus::-ms-fill-lower {
        background: linear-gradient(#fabf38, #fabf38) no-repeat;
      }

      input[type=range]:focus::-ms-fill-upper {
        background: #e8e7e7;
      }
    }
   .reminder{
     .title{
       font-size: 0.28rem;padding-top: 0.52rem;padding-bottom: 0.25rem;
     }
     div{
       line-height: 200%;color: #8c8d90;font-size: 0.24rem;
     }
     .red{
       color: #d97275;
     }
   }
    .notbhpay{
      text-align: center;
      img{
        width: 3.6rem;margin-top: 1.21rem;
      }
      p{
        text-align: center;color: #B3B3B3;font-size: 0.24rem;padding-bottom: 1.8rem;
      }
      a{
        height: 0.88rem;line-height: 0.88rem;font-size: 0.28rem;border-radius: 1rem;color: #181818;
      }
      .toapp{
        display: inline-block;padding-top: 0.2rem;color: #ffd203;
      }
    }
  }

</style>
